<template>
  <div class="news1">
   <headerNav>
         <div class="return" @click="returnBack"></div>
         <div class="news">消息中心</div>
   </headerNav>
   <ul class="nav">
     <li @click="select('left')"><div :class="{xi:!xi}">系统消息</div></li>
     <li @click="select('right')"><div :class="{xi:xi}">活动消息</div></li>
   </ul>
   <div :class="{xian:true,right:right,left:left}"></div>

   <ul class="content">
     <li>
       <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png"/>
       <div>
         <div class="content_title">赢取iphone</div>
         <div class="content_details">赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone</div>
         <div class="content_time">2017-11-13</div>
       </div>
     </li>
     <li>
       <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png"/>
       <div>
         <div class="content_title">赢取iphone</div>
         <div class="content_details">赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone</div>
         <div class="content_time">2017-11-13</div>
       </div>
     </li>
     <li>
       <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png"/>
       <div>
         <div class="content_title">赢取iphone</div>
         <div class="content_details">赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone</div>
         <div class="content_time">2017-11-13</div>
       </div>
     </li>
     <li>
       <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png"/>
       <div>
         <div class="content_title">赢取iphone</div>
         <div class="content_details">赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone赢取iphone</div>
         <div class="content_time">2017-11-13</div>
       </div>
     </li>
   </ul>
  </div>
</template>

<script>
import headerNav from '@/components/header_nav'
export default {
  name: 'feedback',
  components:{
    headerNav,
  },
  data () {
    return {
      right:false,
      left:false,
      xi:false
    }
  },
  mounted(){
  },
  methods:{
    returnBack(){
      this.$router.go(-1)
    },
    select(value){
      if(value=='right'){
        this.right=true
        this.left=false
        this.xi=true
      }else{
        this.right=false
        this.left=true
        this.xi=false
      }
    }
  }
}
</script>
<style scoped>
.news1{width: 100%;height: 100%;background-color: #f0f0f0;padding-top: 50px;}
.news1 div.news{width: 100%;height: 100%;line-height: 50px;text-align: center;font-size: 18px;color: #fff;background-image: linear-gradient(-180deg,#3583f1,#1862E2);border-bottom: 1px solid #3583f1;}
ul.nav {width: 100%;height: 40px;display: flex;}
ul.nav li{width: 50%;height: 100%;line-height: 40px;text-align: center;}
ul.nav li div{height: 100%;line-height: 40px;font-size: 17px;width: 100px;margin: 0 auto;}

.xi{color: rgb(0, 150, 255);}
.xian{width: 100px;height: 1px;background-color: rgb(0, 150, 255);position: absolute;left: 45px;}
.right{left: 230px;animation: dong1 0.5s}
@keyframes dong1{
  0%{left: 45px;}
  100%{left: 230px;}
}
.left{left: 45px;animation: dong2 0.5s}
@keyframes dong2{
  0%{left: 230px;}
  100%{left: 45px;}
}

.content{width: 100%;}
.content li{width: 100%;height: 100px;display: flex;}
.content li img{width: 54px;height: 54px;margin-left: 8px;margin-top:35.5px;}
.content li>div{height: 54px;margin-left: 8px;width: 300px;margin-top:20px;}
.content_title{font-size: 16px;color: #000;line-height: 30px; height: 30px;font-weight: 400;}
.content_details{font-size: 14px;color: #9b9b9b;line-height: 18px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.content_time{color: #999;font-size: 14px;margin-top: 5px;}
</style>
